<template>
    <scroll-view class="recommend_view" @scrolltolower="handleToLower" scroll-y v-if="recommends.length > 0">
        <!-- 推荐开始 -->
        <view class="recommend_wrap">
            <view 
            class="recommend_item"
            v-for="item  in recommends"
            :key="item.id"
            >
                <image mode="widthFix" :src="item.thumb"></image>
            </view>
        </view>
        <!-- 推荐结束 -->
        <!-- 月份开始 -->
        <view class="moneths_wrap">
            <view class="moneths_title">
                <view class="moneths_title_info">
                    <view class="moneths_info">
                        <text>{{moneths.DD}}/</text>
                        {{moneths.MM}}月
                    </view>
                    <view class="moneths_text">{{moneths.title}}</view>
                </view>
                 <view class="moneths_title_more">更多>></view>
            </view>
            <view class="moneths_content">
                <view 
                class="moneths_item"
                v-for="item in moneths.items"
                :key="item.id"
                >
                    <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',240)"></image>
                </view>
            </view>
        </view>
        <!-- 月份结束 -->
        <!-- 热门开始 -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text>热门</text>
            </view>
            <view class="hots_content">
                <view class="hots_item" v-for="item in hots" :key="item.id">
                    <image mode="widthFix" :src="item.thumb"></image>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
import moment from 'moment'
export default {
    data(){
        return {
            //推荐列表
            recommends:[],
            //月份
            moneths:{},
            //热门
            hots:[],
            //接口请求的函数
            params:{
                //要获取几条
                limit:30,
                //关键字
                order:"hot",
                //要跳过几条
                skip:0
            },
            //是否还有下一页数据
            hasMore:true
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
        getList(){
            this.request({
                url:"http://service.picasso.adesk.com/v3/homepage/vertical",
                data:this.params
            })
            .then(result=>{
                //判断还有没有下一页数据
                if(result.res.vertical.length === 0){
                    this.hasMore = false;
                    return;
                }

                //第一次发送请求
                if(this.recommends.length === 0){
                    //推荐
                    this.recommends = result.res.homepage[1].items;
                    
                    //月份
                    this.moneths =  result.res.homepage[2];
                    //用moment.js处理时间戳为12/1的格式
                    this.moneths.MM = moment(this.moneths.stime).format("MM");
                    this.moneths.DD = moment(this.moneths.stime).format("DD");
                    
                }
                //获取热门数据的列表
                //将新老数据拼接
                this.hots = [...this.hots,...result.res.vertical];
                console.log(this.hots);
            })
        },
        // 滚动条触底事件
        handleToLower(){
            console.log(1111);
            //1 修改参数  skip += limit
            //2 重新发送请求  getList();
            //请求成功 hots数据进行叠加
            if(this.hasMore){
                this.params.skip += this.params.limit;
                this.getList();
            }else {
                //弹窗提示用户
                uni.showToast({
                    title:"没有数据了",
                    icon:"none"
                });
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.recommend_view {
    //height 屏幕的高度 - 头部标题的高度-底部导航
    height:calc(100vh - 90rpx);
}
.recommend_wrap {
    display: flex;
    flex-wrap: wrap;
    .recommend_item{
        width: 50%;
        border: 5rpx solid #fff;
    }
}
.moneths_wrap {
  .moneths_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .moneths_title_info {
        color:$color;
        font-size: 30rpx;
        font-weight:600;
        display: flex;
        .moneths_info {
            text {
                font-size: 36rpx;
            }
        }

        .moneths_text {
            font-size: 34rpx;
            color: #666;
            margin-left: 30rpx;
        }
    }

    .moneths_title_more {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color:$color;
    }
  }

  .moneths_content {
      display: flex;
      flex-wrap: wrap;
      .moneths_item {
          width:33.33%;
          border: 5rpx solid #fff;
      }
  }
}
.hots_wrap {
    .hots_title {
        padding: 20rpx;
        text {
            padding-left: 20rpx;
            border-left: 20rpx solid $color;
            font-size: 34rpx;
            font-weight: 600;
        }
    }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
        width: 33.33%;
        border: 5px solid #fff;
        image{
            width: 100%;
        }
    }
  }
}
</style>